<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				background-color: black;
			}
			.th{
				background-color: darkgrey;
			}
			.td{
				background-color: darkgrey;
			}
			input{
				width: 60px;
			}
		</style>
	</head>
	<body>
		<script>
			//运算符（操作符）：算数运算符，递增（递减），比较运算符，逻辑运算符，赋值运算符
			//运算优先级
			
				//1.算数运算符（算术）：+ — * / %(取余，取模)
				console.log(1+1);//2 (1+1=2)
				console.log(1-1);//0 (1-1=0)
				console.log(1*1);//1 (1*1=3)
				console.log(1/1);//1 (1/1=1)
				console.log(1%1);//0 (没余数)
				console.log(5%3);//2 (5%3=2)
				console.log(3%5);//3 (3=5*0+3)
				console.log(11%2);//1 (11=2*5+1)
				
				//但
				console.log(0.1+0.2);//0.30000000000000004 (电脑会进行二进制转换，再转换为10进制，所以会出现问题，最多为17位小数)
				console.log(0.2+0.3);//0.5 (并没有出现17位误差)
				//所以尽量不用浮点数运算
				
				//而且
				var num0 = 0.1+0.2;//0.30000000000000004 ()
				console.log(num0==0.3);//false
				
				//2.自增运算符
				//1+1=2
				var sum0 = 1;
				sum0++;//后置自增： sum0=sum0+1
				++sum0;//前置自增： sum0=sum0+1
				console.log(sum0);//3
				var age0 = 20;
				++age0;
				console.log(age0);
				var age0 = 20;
				age0++;
				console.log(age0);
				
				//先自增再运算，先自增，再返回值
				var p = 10;
				console.log(++p +10);//先自增(p=11),11+10=21 
				//先运算再自增：先返回值，然后自增
				var p = 10;
				console.log(p);//10
				console.log(p++ +10);//20：p=10,10+10=20 ,然后再执行p+1
				console.log(p);//11
				//p++或++p当与其他代码连用时，执行结果会不一样
				
			//练习1.
				var a=10;
				++a;//先自增，a=11
				var b=++a + 2;//先自增，a=12
				console.log(b);//b=12+2
				console.log(a);//a=12
				
				var c=10;
				c++;//c=11
				var d=c++ +2;//先运算，c=11
				console.log(d);//d=(c=11+2)，然后c再自加=12
				console.log(c);//c=12
				
			//练习2.(纠错点)
				var e = 10;
				//这一步和运算符的优先顺序有关系
				//前置递增的优先级为15，后置递增的优先级为16，均大于算术符号12
				//故等价于(e++) + (++e)，e++与++e运行完毕并自增后才相加
				var f = e++ + ++e;//先返回，再自增。左e=10;先自增e=12，再返回。
				console.log(f);//22 （10+12）
				//同理
				var e = 10;
				var f = ++e + e++;//先自增11 + 11++=12
				console.log(f);//22 (11+11)
				console.log(e);//12
				//再同理
				var e = 10
				var f = e++ + e++;
				console.log(f);//21
				//拆分后为
				var g=10;
				console.log(g++);//g=10，g只执行了返回
				console.log(++g);//g=12，g=11+1
				console.log(g);//g=12
				
				//3.赋值运算符
				//= += -= *= /= %=
				var h = 10;
				var i = 5;
				h=i;//重新赋值h
				console.log(h);//5
				h+=i;//a=a+b
				console.log(h);//10
				h-=i;//a=a-b
				console.log(h);//5
				h/=i;//h=h/i ，5/5=1
				console.log(h);//1
				h*=i;//h=h*i 1*5=5
				console.log(h);//5
				h%=i;//h=h%i 
				console.log(h);//0
				
				//4.比较运算符，返回Boolean类型
				//== === != !== > < >= <= ?(三元运算符)
				console.log(5 > 3);//true
				console.log(5 >= 3);//true (5大于或等于3)
				console.log(5 == 3);//false(5不等于3)
				console.log(18 == 18)//true
				console.log(18 == "18");//true 约等于(近似)，样子一样也一样，实际转化了数值类型（会将字符串自动转化数字）
				//所以大于等于>= <=也会转换数值类型
				console.log(18 === "18");//false 相等但不等值（全等）
				//故
				console.log("20" == 20);//true
				console.log("20" === 20);//false
				//!=
				console.log(5 != 3);//true (false的反义词)
				console.log("5" !== 5);//true
				
			//练习3.默认值，confirm
				//P7页选择题：C A A C B
				//操作题1.2
				document.write("<h1>JavaScrpt世界真奇妙</h1>");
				document.write("<p>快来和我一起学习吧</p>");
				var moRenzhi = prompt("请输入你喜欢的城市","北京");//默认值会弹出北京
				
				//confirm
				
			//练习4.
				
				//操作题1：画井号
				var a=prompt("请输入#号的长度");
				if(a >= 10){
					a = 10;
				}else{
					a=a;//break和continue只能使用于循环中
				}
				
				for (var c=0;c<a;c++){
					for (var b=0;b<a;b++){
						document.write("#");
					}
					document.write("<br/>");
				}
				//操作题2：简易购物车
				//这里是用的getElement，不知道书上咋说的。
		</script>
		<!-- 建立表单 -->
		<table border="0" cellpadding="10">
				<tr class="th">
					<th colspan="5"><h3>简易购物车</h3></th>
				</tr>
				<tr class="th">
					<th>商品名称</th>
					<th>数量（件）</th>
					<th>单价（元）</th>
					<th>运费（元）</th>
					<th>合计</th>
				</tr>
				<tr class="td">
					<td>跑跑道具</td>
					<td>
						<input id="quantity" value="3"/>
					</td>
					<td>
						<input id="price" value="5"/>
					</td>
					<td>
						<input id="freight" value="5"/>
					</td>
					<td>
						<output id="total" value=readtext()>0</output> 
					</td>
					</form>
					<script>
						function readtext(){
							//获取值
							var quantity = document.getElementById("quantity").value;
							var price = document.getElementById("price").value;
							var freight = document.getElementById("freight").value;
							var total = document.getElementById("total").value;
							total = parseInt(quantity)*parseInt(price)+parseInt(freight);
							return total;
						}
						document.getElementById("total").innerHTML = readtext();
					</script>
				</tr>
		</table>
	</body>
</html>